<script setup>
import { ref, reactive, computed, watch, nextTick, getCurrentInstance } from "vue";
import ShowPane from "./ShowPane.vue";
import Btn from "./Btn.vue"
import getUser from "../composibles/getUser";
import {getNum} from "../composibles/getUser";
const load = () => {
  console.log("load");
};
const { user, num } = getUser();
(()=>{
  console.log(user.value);
  console.log(num.value);
  console.log(getNum());
})()
let msgBtn = ref("显示");

const btnclick = () => {
  showNum.value++
  testArr.value.age++
}

defineProps({
  msg: String,
});

const count = ref(0),
  showNum = ref(0),
  testArr = ref({
    name: "mirenchun",
    age: 15
  })
</script>

<template>
  <div id="contain">
    <!-- <button @click="btnclick">{{msgBtn}}</button> -->
    <transition name="fade">
      <button v-if="msgBtn=='隐藏'" id="btnTest" :style="btnTestStyle" ref="btn">测试</button>
    </transition>
    <ShowPane :num="showNum" :testArr="testArr" />
    <Btn />
  </div>
</template>

<style>
#contain {
  width: 100%;
  height: 100%;
}

button {
  margin: 5px;
}

.fade-leave-to,
.fade-enter-from {
  opacity: 0;
  /* font-size: 0; */
}

.fade-leave-active,
.fade-enter-active {
  transition: all .3s ease;
}
</style>
